<!--
 * @Description: 标准设置
 * @Autor: yjx
 * @Date: 2021-11-17 11:54:54
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-29 17:22:41
-->
<template>
    <el-dialog
        title="标准设置"
        :visible="visible"
        width="400px"
        @close="onClose"
        @open="onOpen"
        @closed="onClosed"
    >
        <el-form
            v-show="config.type === 'input'"
            ref="inputForm"
            :model="inputForm"
            :rules="inputRules"
            label-width="100px"
            class="input_form"
        >
            <el-form-item label="合格标准：" prop="hgbz">
                <span class="left">[</span>
                <el-input
                    v-model="inputForm.hgbz[0]"
                    type="number"
                    placeholder="下限值"
                />
                <span class="center">，</span>
                <el-input
                    v-model="inputForm.hgbz[1]"
                    type="number"
                    placeholder="上限值"
                />
                <span class="right">]</span>
            </el-form-item>
            <el-form-item label="相邻波动：" prop="xlbd">
                <div class="left">(</div>
                <el-input
                    v-model="inputForm.xlbd[0]"
                    type="number"
                    placeholder="下限值"
                />
                <div class="center">，</div>
                <el-input
                    v-model="inputForm.xlbd[1]"
                    type="number"
                    placeholder="上限值"
                />
                <div class="right">)</div>
            </el-form-item>
            <el-form-item label="异常标准：" prop="ycbz">
                <div class="left">(</div>
                <el-input
                    v-model="inputForm.ycbz[0]"
                    type="number"
                    placeholder="下限值"
                />
                <div class="center">，</div>
                <el-input
                    v-model="inputForm.ycbz[1]"
                    type="number"
                    placeholder="上限值"
                />
                <div class="right">)</div>
            </el-form-item>
            <el-form-item label="异常标准2：" prop="ycbz2">
                <div class="left">(</div>
                <el-input
                    v-model="inputForm.ycbz2[0]"
                    type="number"
                    placeholder="下限值"
                />
                <div class="center">，</div>
                <el-input
                    v-model="inputForm.ycbz2[1]"
                    type="number"
                    placeholder="上限值"
                />
                <div class="right">)</div>
            </el-form-item>
        </el-form>

        <el-form
            v-show="config.type === 'select'"
            ref="selectForm"
            :model="selectForm"
            :rules="selectRules"
            label-width="100px"
            class="select_form"
        >
            <el-form-item
                :label="config.key === 'sbflsjf' ? '选择方法：' : '合格标准：'"
                prop="hgbz"
            >
                <el-select
                    v-model="selectForm.hgbz"
                    value-key="value"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button class="bottom_all_two" @click="onClose">取 消</el-button>
            <el-button class="bottom_all" type="primary" @click="onConfirm"
                >确 定</el-button
            >
        </span>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            inputForm: {
                hgbz: [], // 合格标准
                xlbd: [], // 相邻波动
                ycbz: [], // 异常标准
                ycbz2: [], // 异常标准2
            },
            inputRules: {
                hgbz: [{ required: true, message: '请输入合格标准' }],
                xlbd: [{ required: true, message: '请输入相邻波动' }],
                ycbz: [{ required: true, message: '请输入异常标准' }],
                ycbz2: [{ required: true, message: '请输入异常标准2' }],
            },
            selectForm: {
                hgbz: '', // 合格标准
            },
            selectRules: {
                hgbz: [{ required: true, message: '请选择合格标准' }],
            },
            options: [],
        }
    },
    props: {
        config: {
            type: Object,
            default: () => ({ type: 'input' }),
        },
        visible: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        onOpen() {
            // 打开弹框
            if (this.$refs.inputForm) this.$refs.inputForm.clearValidate()
            if (this.$refs.selectForm) this.$refs.selectForm.clearValidate()
            if(this.config.type === 'select') this.options = this.config.options
            // 数据回显
            if (this.config.data && this.config.data.hgbz && !this.config.data.popupData) {
                if (this.config.type === 'input') {
                    this.inputForm = this.config.data || { hgbz: [], xlbd: [], ycbz: [], ycbz2: [] }       
                }
                if (this.config.type === 'select') {
                    this.selectForm = this.config.data || { hgbz: '' }
                }
            }
        },
        onClose() {
            // 关闭弹框
            this.$emit('update:visible', false)
        },
        onClosed() {
            // 关闭结束的回调，清空数据，清除校验
            this.inputForm = {
                hgbz: [], // 合格标准
                xlbd: [], // 相邻波动
                ycbz: [], // 异常标准
                ycbz2: [], // 异常标准
            }
            this.selectForm = {
                hgbz: '', // 合格标准
            }
        },
        onConfirm() {
            // 确定
            if (this.config.type === 'input') {
                const [hgbz1, hgbz2] = this.inputForm.hgbz
                const [xlbd1, xlbd2] = this.inputForm.xlbd
                const [ycbz1, ycbz2] = this.inputForm.ycbz
                const [ycbz21, ycbz22] = this.inputForm.ycbz2
                if (!hgbz1 || !hgbz2) {
                    return this.$refs.inputForm.validateField('hgbz')
                } else {
                    this.$refs.inputForm.clearValidate(['hgbz'])
                }
                if (!xlbd1 || !xlbd2) {
                    return this.$refs.inputForm.validateField('xlbd')
                } else {
                    this.$refs.inputForm.clearValidate(['xlbd'])
                }
                if (!ycbz1 || !ycbz2) {
                    return this.$refs.inputForm.validateField('ycbz')
                } else {
                    this.$refs.inputForm.clearValidate(['ycbz'])
                }
                if (!ycbz21 || !ycbz22) {
                    return this.$refs.inputForm.validateField('ycbz2')
                } else {
                    this.$refs.inputForm.clearValidate(['ycbz2'])
                }
            }
            if (this.config.type === 'select') {
                const { hgbz } = this.selectForm
                if (typeof hgbz.value !== 'number') {
                    return this.$refs.selectForm.validateField('hgbz')
                } else {
                    this.$refs.selectForm.clearValidate(['hgbz'])
                }
            }
            for (const key in this.inputForm) {
                for (let i = 0; i < this.inputForm[key].length; i++) {
                    this.inputForm[key][i] = Number(this.inputForm[key][i])
                }
            }
            let params = {}
            if (this.config.type === 'input') params = { data: this.inputForm }
            if (this.config.type === 'select')
                params = { data: this.selectForm }
            params.key = this.config.key
            params.type = this.config.type
            this.$emit('updated', params)
            this.$emit('update:visible', false)
        },
    },
}
</script>

<style lang="scss">
.input_form {
    .left {
        margin-right: 10px;
    }
    .center {
        margin: 0 10px;
    }
    .right {
        margin-left: 10px;
    }
    .el-form-item__content {
        display: flex;
    }
    .el-input_inner {
        width: 50px;
    }
}
</style>
